<template>
  <view class="honor-search">
    <view class="img-box">
    </view>
    <view class="box">
      <uni-data-checklist
        style="width: 80vw"
        :wrap="true"
        value="企业荣誉"
        :localdata="localdata"
        @change="changeChecklist"
      />
      <input
        class="honor-input"
        v-model="keywords"
        type="text"
        placeholder="请输入荣誉名称"
      />
      <view class="btn" @click="onSearch"> 开始搜索 </view>
    </view>
  </view>
</template>

<script setup>
import { ref,defineEmits } from "vue";
import uniDataChecklist from "@/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue";
const emit = defineEmits(["on-click","on-search"]);
const localdata = ref([
  {
    text: "企业荣誉",
    value: "企业荣誉",
  },
  {
    text: "个人荣誉",
    value: "个人荣誉",
  },
  {
    text: "集体荣誉",
    value: "集体荣誉",
  },
]);
const keywords = ref("");
function changeChecklist(data) {
    emit("on-click",data)
}
function onSearch () {
    emit("on-search",keywords.value)
}
</script>

<style lang="less" scoped>
@import "@/static/style/global.less";
.honor-search {
  position: relative;
  .img-box {
    width: 100vw;
    height: 830rpx;
    padding-bottom: 20rpx;
    background: @honour-search-img;
    background-size: 100% 100%;
    box-shadow: 0 -12rpx 15rpx 1rpx #fff inset;
  }
  .box {
    width: 85vw;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: -220rpx;
    border-radius: 33rpx;
    padding: 30rpx 40rpx;
    box-shadow: 0 2rpx 19rpx 1rpx #00000042 ;
    .honor-input {
    margin: 50rpx 0;
    font-size: 31rpx;
    ::placeholder {
        color: @color-grey;
        font-family: "ali";
        font-weight: 400;
    }
  }
  .btn {
    width: 85vw;
    text-align: center;
    // background: linear-gradient(90deg, #09bbfe 0%, #5a42ec 100%);
    background:  linear-gradient(90deg, #09d3fe 0%, #4b04f9ab 100%);
    border-radius: 33rpx;
    padding: 10rpx 0;
    font-family: "ali";
    color: @color-font;
    font-weight: 400;
  }
  }

}
</style>
